<template>
  <div class="commodity">
    <div class="title">
      <van-icon name="birthday-cake-o" class="icon" />
      <h4>草莓奶油蛋糕</h4>
      <van-icon name="arrow" />
      <h5>卖家已发货</h5>
    </div>
    <router-link to='/DetailsPage'>
      <div class="com-cont">
        <div class="describe">
          <img src="../../assets/stra.png" class="img" />
          <div class="specs">
            <ul>
              <li><van-icon name="bag" /><span>草莓奶牛蛋糕</span></li>
              <li><van-icon name="wap-nav" /><span>17x17com</span></li>
              <li><van-icon name="friends" /><span>适合7-8人分享</span></li>
              <li><van-icon name="gold-coin" /><span>￥336.00</span></li>
            </ul>
            <p></p>
          </div>
        </div>
      </div>
    </router-link>
    <div class="footer">
      <p>共1件商品 合计:￥336.00(含运费￥00.00)</p>
      <ul>
        <li><button>延长收货</button></li>
        <li><button>查看物流</button></li>
        <li><button class="over">确认收货</button></li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "Detailed"
};
</script>
<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
  list-style: none;
  outline: none;
}
@baseFontSize: 20px;
@baseSize: 20;
@color: #ff5000;
html,
body {
  font-size: @baseFontSize;
  height: 100%;
}
.px2rem(@name,@px) {
  @{name}: @px / 2 / @baseSize * 1rem;
}
a {
  text-decoration: none;
  color: #424649;
}
.commodity {
  margin-top: 1.4rem /* 20/20 */;
  width: 33rem /* 676/20 */;
  padding-left: 1.1rem /* 22/20 */;
  background: rgb(255, 255, 255);
  border-radius: 1rem /* 20/20 */;
  .title {
    margin-top: 1rem /* 32/20 */;
    display: flex;
    align-items: center;
    .icon {
      color: #000;
      font-size: 2rem /* 40/20 */;
      margin-right: 1.5rem /* 30/20 */;
      margin-bottom: 0.5rem;
    }
    h4 {
      font-size: 1.5rem /* 36/20 */;
      margin-right: 1.3rem /* 26/20 */;
      color: #2c2c2c;
    }
    i {
      margin-top: 8px;
      margin-right: 4.1rem /* 82/20 */;
      color: #cccccc;
      font-size: 1.5rem;
      margin-bottom: 0.5rem;
    }
    h5 {
      color: @color;
      font-size: 1.4rem /* 30/20 */;
    }
  }
  .com-cont {
    .describe {
      height: 15rem /* 300/20 */;
      display: flex;
      align-items: center;
      img {
        height: 100%;
      }
      .specs {
        margin-left: 1.5rem;
        ul {
          display: flex;
          flex-direction: column;
          li {
            display: flex;
            align-items: center;
            margin-top: 0.4rem;
            font-size: 1.4rem /* 30/20 */;
            color: #838383;
            span {
              display: inline-block;
              margin-left: 0.3rem;
            }
          }
        }
      }
    }
  }
  .footer {
    display: flex;
    align-items: center;
    flex-direction: column;
    p {
      font-size: 1.5rem;
      color: #333333;
    }
    ul {
      display: flex;
      margin-top: 1rem;
      margin-bottom: 0.5rem;
      li {
        margin-right: 2.2rem;
        button {
          background: none;
          outline: none;
          border: 1px solid #dcdcdc;
          font-size: 1.3rem;
          padding: 0.5rem 1.4rem;
          border-radius: 1.8rem;
          color: #666666;
        }
        .over {
          color: @color;
          border: 1px solid @color;
        }
      }
    }
  }
}
</style>
